<template>
  <el-form
    ref="form"
    :model="form"
    label-position="right"
    size="mini"
    label-width="100px"
    :rules="rules"
  >
    <!-- <el-form-item label="中心节点" prop="centerNode">
      <el-select v-model="form.centerNode" placeholder="请选择中心节点" style="width:280px;">
        <el-option v-for="item in provideList" :key="item.name" :value="item.value" :label="item.name">{{item.name}}</el-option>
      </el-select>
    </el-form-item> -->
    <el-form-item
      label="项目名称"
      prop="projectCode"
    >
      <el-select
        v-model="form.projectCode"
        filterable
        allow-create
        default-first-option
        placeholder="请输入或选择项目"
        style="width:280px;"
      >
        <el-option
          v-for="item in projectsList"
          :key="item.code"
          :value="item.code"
          :label="item.name"
        >{{item.name}}</el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="算力配置">
      <configItem v-model="form.nodeList"></configItem>
    </el-form-item>
    <el-form-item label="上行带宽">
      <el-select
        v-model="form.upBandwidth"
        placeholder="不限"
        style="width:150px;"
      >
        <el-option
          value="1"
          label="不限"
        >不限</el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="下行带宽">
      <el-select
        v-model="form.downBandwidth"
        placeholder="不限"
        style="width:150px;"
      >
        <el-option
          value="1"
          label="不限"
        >不限</el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
  import _ from 'lodash'
  import io from '@/module/io'
  import { mapActions } from 'vuex'
  import configItem from './configItem'
  import { provideList } from './config'
  export default {
    components: {
      configItem
    },
    data () {
      return {
        provideList,
        projectsList: [],
        form: {
          projectCode: '',
          centerNode: 'zt',
          nodeList: []
        },
        rules: {
          centerNode: [{ required: true, message: '请选择节点' }],
          projectCode: [{ required: true, message: '请输入或选择项目' }]
        }
      }
    },
    watch: {
      form: {
        deep: true,
        immediate: true,
        handler: function (newval) {
          this.$emit('input', newval)
        }
      }
    },
    created () {
      let { from } = this.$route.query
      if (from) this.form.centerNode = from
      this._getProejctList()
    },
    methods: {
      ...mapActions('projects', ['getProjectsList', 'createProjects']),
      async _getProejctList () {
        let searchParams = {
          pageNo: 1,
          pageSize: 1000,
          projectType: 0
        }
        return io.get('projects/projectNameList', searchParams, res => {
          this.projectsList = []
          // this.projectsList = res.data.totalList.filter(e => e.common === 0)
          this.projectsList = res.data.totalList
        }).catch(e => {
          console.error(e)
        })
      },
      _createProjects () {
        let data = {
          is_public: 0,
          projectName: _.trim(this.form.projectCode),
          description: ''
        }
        this.createProjects(data).then(async res => {
          let { code } = res.data
          await this._getProejctList()
          this.form.projectCode = code
        })
      },
      validate () {
        return new Promise((resolve, reject) => {
          this.$refs.form.validate(async valid => {
            if (valid) {
              let project = this.projectsList.find(e => e.code === this.form.projectCode)
              if (!project) {
                // 创建新项目
                await this._createProjects()
              }
              return resolve(valid)
            }
            return reject(valid)
          })
        })
      }
    }

  }
</script>

<style lang="scss" scoped>
::v-deep.el-button {
  width: 80px;
}
</style>
